<template>
  <div class="target-category">
    <div class="category-container">
      <slot :categoryList="categoryList"
            :isRedictTo="isRedictTo"
            name="default">
        <view class='cu-tag round line-blue'
              v-for="(item, index) in categoryList"
              :key="index"
              plain
              plainFill
              shape="circle"
              @click="skipToEdit('./category?index=' + index,isRedictTo)">{{item.Name}}</view>
      </slot>
    </div>
  </div>
</template>

<script>
import { skipToEdit } from '@/utils/function.js'
export default {
  props: {
    categoryList: Array,
    isRedictTo: Boolean
  },
  data () {
    return {
    }
  },
  methods: {
    skipToEdit: skipToEdit
  }
}
</script>

<style lang="scss" scoped>
.target-category {
  margin-bottom: 20px;
  .category-container {
    font-size: 18px;
    width: 90%;
    margin: 0 auto;
    .cu-tag {
      margin: 3px 8px;
    }
  }
}
</style>